<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wp {
            position: relative;
            width: 200px;
            height: 200px;
            /* background-color: green; */
            border: 1px solid red;
            text-align: center;
            /* display: table-cell; */
            vertical-align: middle;
            line-height: 300px;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: gray;
        }

        /* 方案1：absolute+负边距，需要固定子元素宽高 */
        /* .center {
           position: absolute;
           left: 50%;
           top: 50%;
           margin-left: -50px;
           margin-top: -50px;
        } */
        /* 方案2：absolute + margin:auto，需要固定子元素宽高*/
        /* .center {
           position: absolute;
           left: 0;
           top: 0;
           right: 0;
           bottom: 0;
           margin: auto;
        } */
        /* 方案3：absolute+calc，需要固定子元素宽高*/
        /* .center {
            position: absolute;
            left: calc(50% - 50px);
            top:calc(50% - 50px);
        } */
        /* 方案4：absolute+transform，无需知道子元素宽高 */
        /* .center {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        } */
        /* 方案5：将div转化为行内块元素，使用line-height+text-align:center（是给父元素的） */
        /* .center {
            display: inline-block;
        } */
        /* 方案6： table默认垂直居中只需要将子元素变为inline-block，然后父元素text-align:center即可（冗余度太高不符合语义）*/
        /* .center {
            display: inline-block;
        } */
        /* 方案7：css-table属性 */
        /* 给父元素加display:table-cell;vertical-align:middle其他操作和table标签一样 */
        .center {
            display: inline-block
        }
        /* 方案8：flex布局，不详细叙述 */
        /* 方案9：grid布局 */
        /* div.wp {
            display: grid;
        }
        .center {
            align-self: center;
            justify-self: center;
        } */
    </style>
</head>

<body>
    <div class="wp">
        <div class="box center"></div>
    </div>
    <!-- <table>
        <tbody>
            <tr>
                <td class="wp">
                    <div class="box center"></div>
                </td>
            </tr>
        </tbody>
    </table> -->
</body>

</html>